<template>
  <div class="container" v-loading="loading">
    <el-button @click="goBack" class="back-btn" type="primary">返回列表</el-button>
    <div class="title">{{noticeDetail.releaseTitle}}</div>
    <div class="time">{{noticeDetail.releaseTime}}</div>
    <div  id="editor-container"></div>
  </div>
</template>


<script setup>
import {nextTick, onMounted, ref} from "vue";
import request from '@/utils/request'
import E from 'wangeditor'
import router from "@/router";

const noticeDetail = ref({
  releaseTitle:'',
  releaseTime:'',
  releaseContent:''
})
const loading = ref(false);
//从路由获取id
onMounted(()=>{
  const id = new URLSearchParams(window.location.search).get('id');
  //获取用户id
  loadDetail(id);
})
let editor = null;
const initEditor = () => {
  // 销毁旧实例
  if (editor) {
    editor.destroy()
    editor = null
  }
  // 创建新实例
  editor = new E('#editor-container')
  // 配置编辑器（只读模式）
  editor.config = {
    ...editor.config,
    readonly: true,        // 设置为只读
    menus: [],             // 清空工具栏
    focus: false,          // 禁止聚焦
    zIndex: 0,             // 去除层级
    pasteFilterStyle: false // 过滤粘贴样式
  }

  // 设置内容并创建
  editor.create()
  editor.disable()
  editor.txt.html(noticeDetail.value.releaseContent)

  // 隐藏工具栏
  const toolbar = editor.$toolbarElem
  if (toolbar) toolbar.hide()
}
//获取公告详情
const loadDetail = (id)=>{
  loading.value = true;
  request.get('/api/crm/notice/selectById?id='+id
  )
      .then(res =>{
      noticeDetail.value = res.data[0];
      console.log(noticeDetail.value);
        // 等待数据更新后初始化编辑器
        nextTick(() => {
          initEditor()
        })
        loading.value = false;
  })
}
//返回列表
const goBack = () => {
  router.push('/system/notice')
}
</script>


<style scoped>
  .title{
    font-size: 14px;
    color: #333;
  }
  .time{
    font-size: 8px;
    color: #666;
    margin-top: 16px;
    margin-bottom: 26px;
  }
  .container{
    height: 80vh;
    padding: 25px 21px;
    background: #FFFFFF;
  }
  /* 覆盖编辑器默认样式 */
  #editor-container {
    border: none !important;
  }

  /* 内容区域样式调整 */
  #editor-container .w-e-text-container {
    border: none !important;
    background: transparent !important;
  }

  #editor-container .w-e-text {
    padding: 0 !important;
    line-height: 1.8;
  }

  /* 图片自适应 */
  #editor-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
  }

  /* 表格样式 */
  #editor-container table {
    border-collapse: collapse;
    margin: 15px 0;
    width: 100%;
  }

  #editor-container td,
  #editor-container th {
    border: 1px solid #ddd;
    padding: 8px;
  }

  /* 代码块样式 */
  #editor-container pre {
    background: #f6f8fa;
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
  }

  /* 列表样式 */
  #editor-container ul,
  #editor-container ol {
    padding-left: 2em;
  }
  .back-btn {
    margin-bottom: 20px;
  }
</style>